<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>问题反馈</title>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="/static/css/homepage.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">

</head>

<body>
    <div id="indextop" class="header header2 header-theme-none">
        <div class="logo fl">
            <a href="#"></a>
        </div>
        <div class="nav fl">
            <a href="/index">首页</a>
            <c:if test="${user.role.id == 3}">
                <a href="/course/stuCourseScore?stuId=${user.id}&page=1">课程成绩</a>
            </c:if>
            <c:if test="${user.role.id == 2}">
                <c:if test="${user.role.id == 2}">
                    <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                        <a target="_blank" style="cursor: pointer;">课程管理</a>
                        <ul id="solutionul">
                            <div style="height:10px;"></div>
                            <li class="solutionli">
                                <a href="/course/courseManagement?page=1">课程管理</a>
                            </li>
                            <li class="solutionli">
                                <a href="/course/courseGrade?page=1&courseId=0">课程评分</a>
                            </li>
                            <div style="height:10px;"></div>
                        </ul>
                    </div>
                </c:if>
            </c:if>
            <c:if test="${user.role.id == 2 || user.role.id == 3}">
                <a href="/problem/feedback?stuId=${user.id}&page=1">问题反馈</a>
            </c:if>
            <c:if test="${user.role.id == 1}">
                <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                    <a target="_blank" style="cursor: pointer;">用户管理</a>
                    <ul id="solutionul">
                        <div style="height:10px;"></div>
                        <li class="solutionli">
                            <a href="/user/findAllUser?page=1">用户列表</a>
                        </li>
                        <li class="solutionli">
                            <a href="/user/addUser">用户增加</a>
                        </li>

                        <div style="height:10px;"></div>
                    </ul>
                </div>
            </c:if>
            <div id="solutiontop" style="float:left;height: 60px;overflow: hidden;">
                <a target="_blank" style="cursor: pointer;">统计信息</a>
                <ul id="solutionul">
                    <div style="height:10px;"></div>
                    <c:if test="${user.role.id == 1}">
                        <li class="solutionli">
                            <a href="/log/getUserStatistics?page=1">访问统计</a>
                        </li>
                        <li class="solutionli">
                            <a href="/log/getAllLog?page=1">用户访问</a>
                        </li>
                    </c:if>
                    <li class="solutionli">
                        <a href="/log/getLog?userId=${user.id}&page=1">个人访问</a>
                    </li>

                    <div style="height:10px;"></div>
                </ul>
            </div>
        </div>
        <style>
            #solutiontop{
                color: #357ae8;
            }
            #solutiontop:hover{
                /* 这里用auto有时无效，如果高度小于元素加起来的高度有bug */
                height: 500px !important;
                color: #357ae8;
            }
            #solutionul{
                overflow: hidden;
                clear: both;
                background: white;
                width: 120px;
                margin: -5px;
                box-shadow: 0px 0px 5px 1px rgba(80,80,80,0.4);
                position: relative;
                z-index: 1;
            }
            .solutionli a{
                width: 100%;
                text-align: center;
                box-sizing: border-box;
                color: #333 !important;
                padding: 0 10px !important;
                height: 40px !important;
                line-height: 40px !important;
            }
            .solutionli{
                height: 40px;
            }
        </style>
        <div class="log-reg fr">
            <a href="#" class="userName" style="">${user.name}</a>
            <a href="/outLogin" class="outLogin">退出登录</a>

        </div>

    </div>

    <div class="home-page">

        <div class="wapper">

            <div class="pop-win feedback"  style="display: none;">
                <div class="pop-win-title">
                    <span>

                    </span>
                </div>
                <div class="line"></div>
                <div class="pop-win-content">
                    <div class="feedback" style="display: none;width: 500px; height: 218px;">
                        <textarea id="textarea" required style="width: 500px; height: 218px;"></textarea>
                    </div>
                    <div class="reply" style="display: none;width: 500px; height: 218px;">
                        <textarea disabled class="problem" required style="width: 500px; height: 106px;"></textarea>
                        <div class="line"></div>
                        <textarea class="reply" required style="width: 500px; height: 106px;"></textarea>

                    </div>
                </div>
                <div class="line"></div>
                <div class="pop-win-operate">
                    <button class="confirm">
                        确定
                    </button>
                    <button class="calcen">
                        取消
                    </button>
                </div>
            </div>

            <div class="title">
                <span>
                    问题反馈
                </span>
                <c:if test="${user.role.id == 3}">
                    <div class="select">
                        <select >
                            <c:forEach items="${allTea}" var="tea">
                                <option value="${tea.id}">${tea.name}</option>
                            </c:forEach>
                        </select>
                        <button class="feedback">反馈</button>
                    </div>
                </c:if>
            </div>
            <div class="line"></div>
            <div class="content-title">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-1">
                            编号
                        </div>
                        <div class="col-sm center-margin">
                            <c:if test="${user.role.id == 3}">
                                教师
                            </c:if>
                            <c:if test="${user.role.id == 2}">
                                学生
                            </c:if>
                        </div>
                        <div class="col-sm-4">
                            问题
                        </div>
                        <div class="col-sm-4 center-margin">
                            回复
                        </div>
                        <div class="col-sm-1">
                            操作
                        </div>
                    </div>
                </div>
            </div>

            <div class="content">
                <c:if test="${problems != null}">
                    <c:forEach items="${problems}" var="problem" varStatus="status">
                        <c:if test="${status.count % 2 == 1}">
                            <div class="list odd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-1">
                                            <span>${problem.id}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <c:if test="${user.role.id == 3}">
                                                <span>${problem.tea.name}</span>
                                            </c:if>
                                            <c:if test="${user.role.id == 2}">
                                                <span>${problem.stu.name}</span>
                                            </c:if>
                                        </div>
                                        <div class="col-sm-4">
                                            <span>${problem.problem}</span>
                                        </div>
                                        <div class="col-sm-4 center-margin">
                                            <span>
                                                   <c:if test="${! problem.reply}">
                                                       ${problem.reply}
                                                   </c:if>
                                            </span>
                                        </div>
                                        <div class="col-sm-1">
                                            <c:if test="${user.role.id == 3}">
                                                <span class="detail">
                                                    详细
                                                </span>
                                            </c:if>
                                            <c:if test="${user.role.id == 2}">
                                                <span class="reply">
                                                    回复
                                                </span>
                                            </c:if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                        <c:if test="${status.count % 2 == 0}">
                            <div class="list even">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-1">
                                            <span>${problem.id}</span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <c:if test="${user.role.id == 3}">
                                                <span>${problem.tea.name}</span>
                                            </c:if>
                                            <c:if test="${user.role.id == 2}">
                                                <span>${problem.stu.name}</span>
                                            </c:if>
                                        </div>
                                        <div class="col-sm-4">
                                            <span>${problem.problem}</span>
                                        </div>
                                        <div class="col-sm-4 center-margin">
                                            <span>
                                                <c:if test="${! problem.reply}">
                                                    ${problem.reply}
                                                </c:if>
                                            </span>
                                        </div>
                                        <div class="col-sm-1">
                                            <c:if test="${user.role.id == 3}">
                                                <span class="detail">
                                                    详细
                                                </span>
                                            </c:if>
                                            <c:if test="${user.role.id == 2}">
                                                <span class="reply">
                                                    回复
                                                </span>
                                            </c:if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                    </c:forEach>
                    <c:if test="${problems.size() < 15}">
                        <c:forEach var="1" begin="${problems.size() + 1}" end="15" varStatus="status">
                            <c:if test="${(status.count + problems.size()) % 2 == 1}">
                                <div class="list odd">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm-1">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm-4">
                                                <span></span>
                                            </div>
                                            <div class="col-sm-4 center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="line"></div>
                            </c:if>
                            <c:if test="${(status.count + problems.size()) % 2 == 0}">
                                <div class="list even">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm-1">
                                                <span></span>
                                            </div>
                                            <div class="col-sm center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm-4">
                                                <span></span>
                                            </div>
                                            <div class="col-sm-4 center-margin">
                                                <span></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <span>

                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="line"></div>
                            </c:if>
                        </c:forEach>
                    </c:if>
                </c:if>
                <c:if test="${problems == null}">
                    <c:forEach var="1" begin="1" end="15" varStatus="status">
                        <c:if test="${(status.count + problems.size()) % 2 == 1}">
                            <div class="list odd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-1">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm-4">
                                            <span></span>
                                        </div>
                                        <div class="col-sm-4 center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm-1">
                                            <span >

                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                        <c:if test="${(status.count + logList.size()) % 2 == 0}">
                            <div class="list even">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-sm-1">
                                            <span></span>
                                        </div>
                                        <div class="col-sm center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm-4">
                                            <span></span>
                                        </div>
                                        <div class="col-sm-4 center-margin">
                                            <span></span>
                                        </div>
                                        <div class="col-sm-1">
                                            <span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </c:if>
                    </c:forEach>
                </c:if>

            </div>

            <div style="height: 15px"></div>

            <!-- 分页 -->
            <div class=".pagination">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <c:if test="${page == 1}">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${page != 1}">
                            <li class="page-item">
                                <a class="page-link" href="#" tabindex="-1">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${pageItemSize < 6}">
                            <c:forEach var="pageItem" begin="1" end="${pageItemSize}">
                                <c:if test="${page == pageItem}">
                                    <li class="page-item active">
                                        <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                    </li>
                                </c:if>
                                <c:if test="${page != pageItem}">
                                    <li class="page-item">
                                        <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                    </li>
                                </c:if>
                            </c:forEach>
                        </c:if>
                        <c:if test="${pageItemSize >= 6 && pageItemSize - 2 >= page}">
                            <c:if test="${page > 3}">
                                <c:forEach var="pageItem" begin="${page - 2}" end="${page + 2}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                            <c:if test="${page <= 3}">
                                <c:forEach var="pageItem" begin="1" end="5">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>

                            <li class="page-item disabled">
                                <a class="page-link" href="#">...</a>
                            </li>
                        </c:if>
                        <c:if test="${pageItemSize >= 6 && pageItemSize - 2 < page}">
                            <c:if test="${page == pageItemSize}">
                                <c:forEach var="pageItem" begin="${pageItemSize - 4 + (pageItemSize - page)}" end="${pageItemSize}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                            <c:if test="${page != pageItemSize}">
                                <c:forEach var="pageItem" begin="${pageItemSize - 5 + (pageItemSize - page)}" end="${pageItemSize}">
                                    <c:if test="${page == pageItem}">
                                        <li class="page-item active">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${page != pageItem}">
                                        <li class="page-item">
                                            <a class="page-link" href="/problem/feedback?stuId=${user.id}&page=${pageItem}">${pageItem}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                        </c:if>
                        <c:if test="${page == pageItemSize}">
                            <li class="page-item disabled">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </c:if>
                        <c:if test="${page != pageItemSize}">
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </c:if>
                    </ul>
                </nav>
            </div>
        </div>



    </div>

    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/main.js"></script>
    <script type="text/javascript">

        let popActive = '';

        $('.pop-win-operate .confirm').click(function () {
            if(popActive === 'feedback') {
                let problem = $('.pop-win .pop-win-content .feedback #textarea').val();
                let teaId = $('.title .select select option:selected').val();

                var formData = {
                    problem: problem,
                    tea: {
                        id: teaId
                    },
                    stu: {
                        id: ${user.id}
                    }
                };

                $.ajax({
                    type: 'POST',
                    dataType:'json',
                    data: JSON.stringify(formData),
                    url: '/problem/addProblem',
                    contentType:"application/json",
                    success: function (result) {
                        if(result.code === 1){
                            alert("反馈成功");
                            // 刷新页面
                            window.location.href = window.location.href;
                        } else if(result.code === 0) {
                            alert("反馈失败");
                        }
                    }
                });
            } else if(popActive === 'reply') {
                console.log(clickProblemId);
                var pop_problem = $('.pop-win .pop-win-content > .reply .problem').val();
                var pop_replay = $('.pop-win .pop-win-content > .reply .reply').val();
                var formData = {
                    id: clickProblemId,
                    reply: pop_replay
                };

                $.ajax({
                    type: 'PUT',
                    dataType:'json',
                    data: JSON.stringify(formData),
                    url: '/problem/replay',
                    contentType:"application/json",
                    success: function (result) {
                        console.log()
                        alert("回复成功");
                        // 刷新页面
                        window.location.href = window.location.href;
                    }
                });
            }

            $('.pop-win .pop-win-content > .reply').css("display", 'none');
            $('.pop-win-content .feedback').css('display', 'none');
            $('.pop-win').css('display', 'none');
        });

        $('.pop-win-operate .calcen').click(function () {
            $('.pop-win .pop-win-content > .reply').css("display", 'none');
            $('.pop-win-content .feedback').css('display', 'none');
            $('.pop-win').css('display', 'none');
        });

        $('.title .select .feedback').click(function () {
            popActive = 'feedback';

            $('.pop-win .pop-win-title span').text('问题反馈');
            $('.pop-win').css('display', 'block');
            $('.pop-win-content .feedback').css('display', 'block');
        });

        $('.content .row .detail').click(function (event) {
            popActive = "detail";
            this.id += "detailClick";
            let prevs = $('#detailClick').parent().prevAll();
            let spans = prevs.children('span');
            $('#detailClick').removeAttr("id");

            let problem = spans[1].innerHTML;
            let reply = spans[0].innerHTML;

            $('.pop-win').css('display', 'block');
            $('.pop-win .pop-win-content .reply').css('display', 'block');
            $('.pop-win .pop-win-title span').text("详细");
            $('.pop-win .pop-win-content > .reply').css("display", 'block');
            $('.pop-win .pop-win-content > .reply .problem').text(problem.trim());
            $('.pop-win .pop-win-content > .reply .reply').text(reply.trim());
            $('.pop-win .pop-win-content > .reply .reply').attr("disabled", true)
        });



        var clickProblemId;

        $('.content .row .reply').click(function (event) {
            popActive = 'reply';
            this.id += "detailClick";
            var prevs = $('#detailClick').parent().prevAll();
            var spans = prevs.children('span');
            var problem = spans[1].innerHTML;
            var reply = spans[0].innerHTML;
            clickProblemId = spans[spans.length - 1].innerHTML;
            $('#detailClick').removeAttr("id");
            $('.pop-win').css('display', 'block');
            $('.pop-win .pop-win-title span').text("回复");
            $('.pop-win .pop-win-content > .reply').css("display", 'block');
            $('.pop-win .pop-win-content > .reply .problem').text(problem.trim());
            $('.pop-win .pop-win-content > .reply .reply').text(reply.trim());
        });

    </script>
</body>
</html>